<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model实例</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../js/bootstrap.js"></script>
    <style>
        /*
        功能:
            给模态框新增这个类可以使模态框居中显示.
        */
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        #ppp p {
            float: left;
            width: 50px;
        }
    </style>
</head>
<body>
<button onclick="show()">显示</button>
<div class="modal fade center" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">修改审核人</h4>
            </div>
            <form class="form-horizontal" role="form">
                <div class="modal-body">
                    <div class="form-group" id="corpDiv">
                        <label class="col-sm-2 control-label">公司</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="selectList" οnchange="selectChange()"></select>
                        </div>
                    </div>
                    <div class="form-group" id="editCorpDiv">
                        <label class="col-sm-2 control-label">公司</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="editCorpDivName" type="text" value="" disabled/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">维度</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="weidu" type="text" value="" οnblur="onblurEvent()" οninput="value=value.replace(/[^\d]/g,'')"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">维度名称</label>
                        <div class="col-sm-10" id="ppp">
                            <input class="form-inline" id="weiduName1" type="text" value=""/>
                            <input class="form-inline" id="weiduName2" type="text" value=""/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">321</label>
                        <div class="col-sm-10">
                            <textarea style="resize: none;" class="form-control" id="answer" readonly="readonly"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">审核人</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="approveName" type="text" value="" list="ide" onKeyUp="keyUpEvent(event)">
                            <datalist id="ide"></datalist>
                        </div>
                    </div>
                    <input id="editId" name="editId" style="display:none"/>
                    <input id="editUserId" name="editUserId" style="display:none"/>
                    <input id="flag" style="display:none">
                    <input id="editCorpId" type="text" style="display:none;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" οnclick="submitEdit()">保存</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script>

    function show() {
        $("#editModal").modal('show');
    }

    $('#editModal').on('shown.bs.modal', function (e) {
        // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
        $(this).css('display', 'block');
        var modalHeight=$(window).height() / 2 - $('#youModel .modal-dialog').height() / 2;
        $(this).find('.modal-dialog').css({
            'margin-top': modalHeight
        });
    });

</script>
</html>